<template>
    <div class="register">
        <div class="form_container">
            <div class="manage_tip">
                <span class="title">
                    注册请先联系管理员
                </span>
            </div>
            <el-form :model="registerUser" :rules="rules" ref="registerForm" label-width="80px" class="registerForm">
                <el-form-item label="用户名" prop="username">
                    <el-input type="text" v-model="registerUser.username"
                              placeholder="请输入用户名..."></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input type="password" v-model="registerUser.password" autocomplete="off"
                              placeholder="请输入密码..."></el-input>
                </el-form-item>
                <el-form-item label="确认密码" prop="password2">
                    <el-input type="password" v-model="registerUser.password2" autocomplete="off"
                              placeholder="请输入二次密码..."></el-input>
                </el-form-item>

                <el-form-item label="选择年级" props="gradeCode">
                    <el-select v-model="registerUser.gradeCode" placeholder="请选择年级...">
                        <el-option v-for="i in grades" :label="i.value" :value="i.key" :key="i.key">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="选择学院" props="gradeCode">
                    <el-select v-model="registerUser.collegeCode" placeholder="请选择学院...">
                        <el-option v-for="i in colleges" :label="i.value" :value="i.key" :key="i.key">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="选择班级" props="gradeCode">
                    <el-select v-model="registerUser.classCode" placeholder="请选择班级...">
                        <el-option v-for="i in classes" :label="i.value" :value="i.key" :key="i.key">
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item>
                    <el-button @click="submitForm('registerForm')" type="primary" class="submit_btn">注册</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>
<script>
    const grades=[{"key":"2019","value":"2019级"},
        {"key":"2020","value":"2020级"},
        {"key":"2021","value":"2021级"}]

    const colleges=[{"key":"01","value":"信息技术学院"},
        {"key":"02","value":"金融管理学院"},
        {"key":"03","value":"影视后期学院"},
        {"key":"04","value":"人工智能学院"},
        {"key":"05","value":"机器自动学院"},
        {"key":"06","value":"数据分析学院"},
        {"key":"07","value":"广告设计学院"},
        {"key":"08","value":"动漫音乐学院"},
        {"key":"09","value":"通信技术学院"},]
    const classes=[{"key":"02","value":"二班"},
        {"key":"03","value":"三班"},
        {"key":"04","value":"四班"},
        {"key":"05","value":"五班"},
        {"key":"01","value":"六班"},]
    import qs from 'qs'
    export default {

        name: "RegPage",
        data() {
            var validatePass2 = (rule, value, callback) => {
                if (value !== this.registerUser.password) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();
                }
            };
            return {
                grades:grades,
                colleges:colleges,
                classes:classes,
                registerUser: {
                    username: "",
                    password: "",
                    password2: "",
                    gradeCode: "",
                    collegeCode: "",
                    classCode: "",
                },
                rules: {
                    name: [
                        {required: true, message: "用户名不能为空!", trigger: "blur"},
                        {min: 2, max: 30, message: "长度在2-30字符串之间", trigger: "blur"}
                    ],
                    password: [
                        {required: true, message: "密码不能为空!", trigger: "blur"},
                        {min: 6, max: 30, message: "长度在6到30之间", trigger: "blur"}
                    ],
                    password2: [
                        {required: true, message: "确认密码不能为空!", trigger: "blur"},
                        {min: 6, max: 30, message: "长度在6到30之间", trigger: "blur"},
                        {validator: validatePass2, trigger: "blur"}
                    ],
                    gradeCode: [
                        {required: true, message: "学年不能为空!", trigger: "change"},
                    ],
                    collegeCode: [
                        {required: true, message: "学院不能为空!", trigger: "change"},
                    ],
                    classCode: [
                        {required: true, message: "班级不能为空!", trigger: "change"},
                    ],
                }
            }
        },
        methods: {
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        alert('submit!');
                        this.$http({
                            url:"/reg",
                            method:'post',
                            data:qs.stringify(this.registerUser)
                        }).then(res=>{
                            this.$alert('请牢记该学号，之后用学号登录'+res.data.msg, '注册成功', {
                                confirmButtonText: '确定',
                                callback: action => {
                                    this.$message({
                                        type: 'info',
                                        message: `action: ${action}`
                                    });
                                    this.$router.push("/login_page")
                                }
                            });
                            })
                            .catch(err=>{
                                console.log(err)
                            })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            }
        }
    }
</script>
<style scoped>
    .register {
        position: relative;
        width: 100%;
        height: 100%;
    }

    .form_container {
        width: 370px;
        height: 210px;
        /*position: absolute;*/
        top: 10%;
        left: 34%;
        padding: 25px;
        border-radius: 5px;
        text-align: center;
    }

    .form_container .manage_tip .title {
        font-family: 'Avenir', Helvetica, Arial, sans-serif;
        font-weight: bold;
        font-size: 26px;
        color: #333;
    }

    .registerForm {
        margin-top: 20px;
        background-color: #fff;
        padding: 20px 40px 20px 20px;
        border-radius: 5px;
        box-shadow: 0 5px 10px #cccc;
    }

    .submit_btn {
        width: 100%;
    }
</style>
